<template>
  <div>
    <!-- <el-select v-model="ruleForm.region" placeholder="请选择试题标签" style="width: 400px;">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
     </el-select> -->
      <el-select
        v-model="value"
        multiple
        filterable
        allow-create
        default-first-option
        style="width: 400px;"
        @change="onchange"
        placeholder="请选择试题标签">
      <el-option
       v-for="item in options"
       :key="item.id"
       :label="item.tagName"
       :value="item.tagName">
    </el-option>
  </el-select>
  </div>
</template>

<script>
// 导入封装的接口
import { list } from '../../api/hmmm/tags'
export default {
  props: ['subjectID', 'tags'],
  data () {
    return {
      options: [],
      value: []
    }
  },
  // created () {
  //   this.getTags()
  // },
  watch: {
    subjectID (oldVal, newVal) {
      if (oldVal) {
        this.getTags()
      }
    },
    tags (oldVal, newVal) {
      if (oldVal) {
        this.value = [...this.tags.split(',')]
      }
    }
  },
  methods: {
    async  getTags () {
      const data = await list({
        page: 1,
        pagesize: 10,
        subjectID: this.subjectID
      })
      this.options = data.data.items
    },
    onchange (e) {
      // console.log(e)
      // const a = ['a', 'b', 'c']
      // const b = a.join(',')
      // console.log(b)
      this.$emit('update:tags', e.join(','))
      // const a = 'a,b,c'
      // const b = [...a.split(',')]
      // console.log(b)
    }
  }
}
</script>

<style>

</style>
